<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script src="../js/vue3.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/element-plus.js"></script>
    <script src="../js/icons-vue.js"></script>
    <script src="../js/zh-cn.js"></script>
    <script src="../js/axios-interceptor.js"></script>
    <link rel="stylesheet" href="../css/index.css"/>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(120deg, #3494e6, #ec6ead);
            padding: 20px;
        }

        .login-container {
            display: flex;
            width: 900px;
            height: 500px;
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }

        .left-panel {
            flex: 1;
            background: linear-gradient(120deg, #2c3e50, #4ca1af);
            color: white;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .left-panel::before {
            content: '';
            position: absolute;
            top: -70px;
            right: -70px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
        }

        .left-panel::after {
            content: '';
            position: absolute;
            bottom: -80px;
            left: -80px;
            width: 250px;
            height: 250px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
        }

        .welcome-text h1 {
            font-size: 32px;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .welcome-text p {
            font-size: 16px;
            line-height: 1.6;
            opacity: 0.9;
        }

        .features {
            margin-top: 30px;
        }

        .feature {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .feature i {
            font-size: 20px;
            margin-right: 15px;
            color: #64ffda;
        }

        .right-panel {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .login-form {
            width: 100%;
        }

        .form-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .form-header h2 {
            font-size: 28px;
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .form-header p {
            color: #7f8c8d;
            font-size: 14px;
        }

        .form-item {
            margin-bottom: 22px;
        }

        .login-btn {
            width: 100%;
            height: 50px;
            font-size: 16px;
            margin-top: 10px;
            background: linear-gradient(120deg, #3494e6, #ec6ead);
            border: none;
        }

        .login-btn:hover {
            background: linear-gradient(120deg, #2980b9, #d3549f);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .social-login {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

        .social-btn {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .social-btn:hover {
            transform: translateY(-3px);
        }

        .facebook {
            background: #3b5998;
        }

        .google {
            background: #dd4b39;
        }

        .github {
            background: #333333;
        }

        .footer-links {
            text-align: center;
            margin-top: 25px;
            font-size: 14px;
            color: #7f8c8d;
        }

        .footer-links a {
            color: #3498db;
            text-decoration: none;
            margin: 0 8px;
        }

        .footer-links a:hover {
            text-decoration: underline;
        }

        .logo {
            position: absolute;
            top: 30px;
            left: 30px;
            font-size: 24px;
            font-weight: 700;
            color: white;
            display: flex;
            align-items: center;
        }

        .logo i {
            margin-right: 10px;
            font-size: 28px;
        }

        @media (max-width: 900px) {
            .login-container {
                flex-direction: column;
                height: auto;
                width: 100%;
            }

            .left-panel {
                padding: 30px;
                text-align: center;
            }

            .right-panel {
                padding: 30px;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="login-container">
        <div class="left-panel">
            <div class="logo">
                <i class="fas fa-shield-alt"></i>
                <span>AuthSystem</span>
            </div>
            <div class="welcome-text">
                <h1>欢迎回来</h1>
                <p>登录您的账户以访问我们的全方位服务和管理工具。我们为您的数据提供最安全的保护。</p>
            </div>
            <div class="features">
                <div class="feature">
                    <i class="fas fa-lock"></i>
                    <span>高级安全保护</span>
                </div>
                <div class="feature">
                    <i class="fas fa-sync-alt"></i>
                    <span>多设备同步</span>
                </div>
                <div class="feature">
                    <i class="fas fa-headset"></i>
                    <span>24/7 客户支持</span>
                </div>
            </div>
        </div>
        <div class="right-panel">
            <div class="form-header">
                <h2>登录账户</h2>
                <p>请输入您的用户名和密码</p>
            </div>
            <el-form :model="loginForm" :rules="rules" ref="loginFormRef" class="login-form">
                <div class="form-item">
                    <el-form-item prop="username">
                        <el-input
                                v-model="loginForm.username"
                                placeholder="用户名"
                                size="large"
                                prefix-icon="User"
                        ></el-input>
                    </el-form-item>
                </div>
                <div class="form-item">
                    <el-form-item prop="password">
                        <el-input
                                v-model="loginForm.password"
                                type="password"
                                placeholder="密码"
                                size="large"
                                prefix-icon="Lock"
                                show-password
                        ></el-input>
                    </el-form-item>
                </div>
                <el-form-item>
                    <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
                    <el-link type="primary" :underline="false" style="float: right;">忘记密码?</el-link>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="login-btn" @click="submitForm">登录</el-button>
                </el-form-item>
            </el-form>

            <div class="social-login">
                <div class="social-btn facebook">
                    <i class="fab fa-facebook-f"></i>
                </div>
                <div class="social-btn google">
                    <i class="fab fa-google"></i>
                </div>
                <div class="social-btn github">
                    <i class="fab fa-github"></i>
                </div>
            </div>

            <div class="footer-links">
                还没有账户? <a href="#">立即注册</a> | <a href="#">帮助中心</a>
            </div>
        </div>
    </div>
</div>
<script>
    const {createApp, ref} = Vue;
    const {ElMessage, ElMessageBox} = ElementPlus;
    const app = createApp({
        setup() {
            const loginFormRef = ref();
            const loginForm = ref({});

            const validateUsername = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入用户名'));
                } else {
                    callback();
                }
            };

            const validatePassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else if (value.length < 6) {
                    callback(new Error('密码长度不能少于6个字符'));
                } else {
                    callback();
                }
            };

            const rules = {
                username: [{required: true, message: '请输入用户名', trigger: 'blur'},
                    {validator: validateUsername, trigger: 'blur'}],
                password: [{required: true, message: '请输入密码', trigger: 'blur'},
                    // {validator: validatePassword, trigger: 'blur'}
                ]
            };

            const submitForm = () => {
                loginFormRef.value.validate((valid) => {
                    if (valid) {
                        // 这里模拟登录成功
                        axios.post("/user/login", loginForm.value).then(resp => {
                            ElMessage.success(resp.data.msg);
                            window.location.href = "/main.html"
                        })
                    } else {
                        ElMessage.error('请正确填写表单');
                        return false;
                    }
                });
            };

            return {
                loginFormRef,
                loginForm,
                rules,
                submitForm
            };
        }
    }).use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    }).mount('#app');
</script>


</body>
</html>